<html>
<head>
<style>

a {
  text-decoration: none;
}

body {
  background: url("background.png");
  padding: 4px;
  margin: 0px;
}

.button, .button_selected {
  background-color: #666;
  padding: 4px;
  border: 4px solid #444;
}

.button_selected {
  background-color: #48b;
}

.button:hover {
  background-color: #777;
}

</style>
<script src="sprites.js" language="javascript"></script>
<script src="maps.js" language="javascript"></script>
<script src="tiles.js" language="javascript"></script>
<script src="frametimer.js" language="javascript"></script>
<script src="mouse.js" language="javascript"></script>
<script src="main.js" language="javascript"></script>
<script src="inventory.js" language="javascript"></script>
</head>
<body onload="init()">
<table>
  <tr>
    <td>
      <canvas id="canvas" width=512 height=512 style="display: inline-block"
              onmousemove="mapMouseMove(event)" onmouseout="mapMouseOut()"
              onclick="mapMouseClick()">
      </canvas>
    </td><td>
      <table>
        <tr><td>
          <a href="javascript:selectButton(0)">
            <canvas class="button" id="button0" width="64" height="32">
            </canvas>
          </a>
        </td></tr><tr><td>
          <a href="javascript:selectButton(1)">
            <canvas class="button" id="button1" width="64" height="32">
            </canvas>
          </a>
        </td></tr><tr><td>
          <a href="javascript:selectButton(2)">
            <canvas class="button" id="button2" width="64" height="32">
            </canvas>
          </a>
        </td></tr><tr><td>
          <a href="javascript:selectButton(3)">
            <canvas class="button" id="button3" width="64" height="32">
            </canvas>
          </a>
        </td></tr><tr><td>
          <a href="javascript:selectButton(4)">
            <canvas class="button" id="button4" width="64" height="32">
            </canvas>
          </a>
        </td></tr>
      </table>
    </td>
  </tr><tr><td>
    <canvas id="scoreboard" width=512 height=32></canvas>
  </td></td></tr>
</table>
<a href="javascript:nextMap()">Next map.</a>
</body>
</html>
